﻿
@section CSS{
    <style>
    </style>
}

<div class="page-nav">首页 > 角色管理</div>
<div class="page-body">
    <div class="page-title"><i class="layui-icon layui-icon-rate-solid"></i><h2>角色管理</h2></div>
    <hr class="layui-bg-gray">

    <div class="page-quote">
        <blockquote class="layui-elem-quote">管理角色信息列表<br />这里可以写些注意事项</blockquote>
    </div>

    <div class="page-query">
        <form class="layui-form" id="formQuery">
            <div class="layui-inline">
                <label class="layui-form-label">角色ID</label>
                <div class="layui-input-block">
                    <input type="text" name="RoleID" placeholder="" class="layui-input" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="RoleName" placeholder="" class="layui-input" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" onclick="RoleList.query()">查询</button>
                </div>
            </div>
        </form>
    </div>

    <div class="page-tool">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="RoleList.add()">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>
        </div>
    </div>
    <div class="page-list">
        <table id="table-list" lay-filter="tableList"></table>
    </div>
</div>

<script type="text/html" id="barTool">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

@section Scripts{
    <script>
        var RoleList = function () {
            let inited = false;
            let data = {};

            function initData() {
                layui.use(['form', 'layer', 'table'], function () {
                    //加载数据
                    loadData();

                    //给工具条注册点击事件
                    layui.table.on('tool(tableList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var id = obj.data.id;
                        //layer.msg(id);

                        if (obj.event === 'del') {
                            parent.layer.confirm('确认删除该数据？', function (index) {
                                //开启loading
                                layer = layui.layer;
                                var indexLoad = layer.load(3, { shade: 0.3, zIndex: 19891017 });

                                $.ajax({
                                    url: "/Role/DeleteRole",
                                    type: "post",
                                    data: { id: id },
                                    success: function (data) {
                                        layer.close(index);
                                        if (data.state == 1) {
                                            parent.layer.msg("删除成功", { shade: 0.1, icon: 1 });
                                        } else if (data.state == 0) {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "删除失败 " + data.msg
                                                , shade: 0.4
                                                , icon: 5
                                            });
                                        } else {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "删除异常 " + data.msg
                                                , shade: 0.4
                                                , icon: 2
                                            });
                                        }
                                        layui.table.reload('table-list');
                                        layer.close(indexLoad);
                                    },
                                    error: function (xhr, state, errorThrown) {
                                        layer.close(index);
                                        layui.table.reload('table-list');
                                        parent.layer.open({
                                            title: '提示'
                                            , content: "删除异常 " + errorThrown
                                            , shade: 0.4
                                            , icon: 2
                                        });
                                        layer.close(indexLoad);
                                    }
                                });
                            });
                        } else if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑角色',
                                area: ['600px', '530px'],
                                content: ["/Role/addorupdate?id=" + id]
                            });
                        }


                    });
                });
            }

            function loadData() {
                var data = $('#formQuery').serializeJson();

                layui.table.render({
                    elem: '#table-list'
                    , height: 670
                    , url: '/Role/GetRoleList' //数据接口
                    , where: data
                    , page: true //开启分页
                    , limit: 15
                    , cols: [[ //表头
                        { field: 'id', title: 'ID', width: 100, sort: true }
                        , { field: 'roleName', title: '角色名称', width: 160 }
                        , { field: 'remark', title: '备注' }
                        , {
                            field: 'createTime', title: '创建时间', templet: function (d) {
                                return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                            }
                        }
                        , { field: '', title: '操作', width: 250, align: 'center', toolbar: '#barTool' }
                    ]]
                    , done: function (res, curr, count) {
                        console.log(res);
                    }

                });
            }

            return {
                init() {//初始化
                    if (!inited) {
                        initData();
                        inited = true;
                    }
                },
                query() {//查询
                    loadData();
                },
                add() {//添加
                    layer.open({
                        type: 2,
                        title: '添加角色',
                        area: ['600px', '530px'],
                        content: ["/Role/addorupdate"]
                    });
                }
            };
        }();
        RoleList.init();
    </script>
}